.my {
  background: #fafafa;

  .top {
    background-color: #ffffff;
    box-shadow: 0px 2px 9px 1px rgba(188, 188, 192, 0.18);

    .user-wrapper {
      margin-top: 20rpx;
      padding: 0 25rpx;
      position: relative;

      .user-item {
        display: flex;

        .avatar-wrapper {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          border: 2px solid #e1e1e1;
          overflow: hidden;
          margin-right: 28rpx;

          .avatar {
            height: 100%;
            width: 100%;
            border-radius: 50%;
          }
        }

        .right {
          .name {
            display: flex;
            align-items: center;

            .world {
              font-size: 34rpx;
              font-weight: 700;
              color: #000000;
            }

            .type {
              background-image: linear-gradient(-45deg,
              #0166e1 0%,
              #019cf8 100%),
              linear-gradient(#e3e3e3,
              #e3e3e3);
              background-blend-mode: normal,
              normal;
              border-radius: 15rpx;
              font-size: 20rpx;
              color: #ffffff;
              padding: 0rpx 20rpx;
              height: 30rpx;
              line-height: 30rpx;
              margin-left: 19rpx;
            }
          }

          .phone {
            margin-top: 16rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #000000;
          }
        }
      }

      .detail {
        width: 20rpx;
        height: 36rpx;
        position: absolute;
        right: 25rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .down {
    margin-top: 25rpx;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(36, 31, 27, 0.08);
    padding: 0 25rpx;

    .ul {
      .li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 85rpx;

        .left {
          height: 85rpx;
          display: flex;
          align-items: center;

          .icon {
            margin-right: 28rpx;
          }

          .label {
            font-size: 24rpx;
          }
        }

        .more {
          width: 12rpx;
          height: 20rpx;
        }
      }

      .li {
        &:nth-child(1) {
          .icon {
            width: 30rpx;
            height: 26rpx;
          }
        }

        &:nth-child(2) {
          .icon {
            width: 27rpx;
            height: 33rpx;
          }
        }

        &:nth-child(3) {
          .icon {
            width: 28rpx;
            height: 30rpx;
          }
        }
      }
    }
  }

  .community-list {
    margin-top: 50rpx;
    padding-bottom: 64rpx;

    .rel {
      position: relative;
    }
  }

  .bannerBox {
    height: 156rpx;
    margin: 0 auto;
  }

  .banner {
    overflow: hidden;
    height: 164rpx;
    transition: transform 500ms;
    transform: scale(0.95, 0.9); /* 因为非主图看不清，所以可以变形处理 */
    border-radius: 8px;
    width: 100%;
    position: relative;

    .mt10 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .community-name-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #ffffff;
      font-weight: 500;
      padding: 36rpx 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .com-name {
        font-size: 34rpx;
      }

      .address {
        font-size: 24rpx;
      }
    }
  }

  .banner.active {
    transform: scale(1, 1);
  }

  .bannerDots {
    width: 100%;
    left: 0;
    height: 6px;
    position: absolute;
    bottom: 10px;
    text-align: center;
  }

  .dot {
    width: 6px;
    height: 6px;
    margin: 0 3px;
    border-radius: 3px;
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
  }

  .dot.active {
    width: 15px;
    background-color: #7090E8;
  }

  .van-dialog__button {
    width: 50%;
  }

  .van-button--large {
    width: 100% !important;
  }
}
